<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/remove.css">
	<link rel="stylesheet" href="css/car.css">
</head>
<body>
	<header>
		<div class="header-top">
			<div class="header-top-con">
				<ul>
					<li><a href="order.html">
						订单追踪
						<i class="icon-headerf icon-new-first"></i>
					</a></li>
					<li><a href="">
						帮助中心
						<i class="icon-headers icon-new-second"></i>
					</a></li>
					<li><a href="">
						在线客服
						<i class="icon-headert icon-new-third"></i>
					</a></li>
					<li><a class="user" href="sign.html">
						登录
						<i id="login" class="icon-headerl icon-new-last"></i>
					</a></li>
					<div id="hover">
						<p class="qie">切换账户</p>
						<p class="me">个人信息</p>
						<p class="tui">退出</p>
					</div>
				</ul>
			</div>
		</div>
		<div class="header-con">
			<div class="header-con-left">
				<h1>
					<img src="img/first/logo-new.png" alt="">
				</h1>
				<ul>
					<li><a href="list.html">男子</a></li>
					<li><a href="">女子</a></li>
					<li><a href="">儿童</a></li>
					<li><a href="">|</a></li>
					<li><a href="">运动</a></li>
					<li><a href="">品牌</a></li>
					<li><a href="">精选系列</a></li>
				</ul>
			</div>
			<ul class="header-con-right">
				<li class="header-seach">
					<i></i>
					<input type="" placeholder="冬季甄选">
				</li>
				<li class="car">
					<i class="icon-cart"></i>
					<span class="icon-car">0</span>
				</li>
			</ul>
		</div>
	</header>
	<article>
		<div class="article-title">
			全场免普通达运费和七天无理由退货服务（印制商品除外）。成为adiCLUB会员，消费即可获得积分，铜牌以上会员即可积分兑换优惠券。
		</div>
		<h3>您的购物袋</h3>
		<ul class="car-li">
		</ul>
		<li id="template">
			<img src="" alt="">
			<div class="spann" style="display: flex;"><span>品牌:</span><p class="car-title"></p></div>
			<div class="spann" style="display: flex;"><span>颜色:</span><p class="color"></p></div>
			<div class="spann" style="display: flex;"><span>尺码:</span><p class="size"></p></div>
			<button class="add">编辑</button>
			<button class="del">删除</button>

			<p class="price">
				<span class="price-one"></span>
				<input type="text" class="num" value="1">
			</p>
		</li>
		<div class="cart-order">
			<h3>订单摘要</h3>
			<div class="product-price">
				<p>
					<span>商品数量</span>
					<span class="product-price-money">0 件</span>
				</p>
				<p>
					<span>优惠金额</span>
					<span class="product-price-you">-￥0.00</span>
				</p>
				<p>
					<span style="font-weight: bold;">商品总计</span>
					<span class="product-price-zong">￥0</span>
				</p>
			</div>
			<div class="compute">
				结算
			</div>
		</div>
	</article>

	<div class="footer-top">
		<div class="footer-top-con">
			<ul>
				<li>联系我们</li>
				<li>
					<i class="icon icon-ke"></i>
					在线客服
				</li>
				<li>
					<i class="icon icon-phone"></i>
					400-999-5999
				</li>
				<li>
					<i class="icon icon-email"></i>
					server@adidas.com
				</li>
				<li>
					<i class="icon icon-time"></i>
					9:00-22:00
				</li>
			</ul>
			<div class="right">
				<i class="icon icon-zhui"></i>
				订单追踪
			</div>
		</div>
	</div>
	<div class="footer-con">
		<ul>
			<ul>
				<li class="foot-procuct">产品</li>
				<li>鞋类</li>
				<li>服装</li>
				<li>配件</li>
				<li>最新上市</li>
				<li>新品发售日历</li>
				<li>限量发售</li>
			</ul>
			<ul>
				<li class="foot-procuct">运动</li>
				<li>跑步</li>
				<li>训练</li>
				<li>足球</li>
				<li>篮球</li>
				<li>户外</li>
			</ul>
			<ul>
				<li class="foot-procuct">帮助中心</li>
				<li>关于员工</li>
				<li>尺码表</li>
				<li>adiCLUB会员</li>
				<li>门店查询</li>
				<li>关于我们</li>
				<li>企业社会责任</li>
				<li>ADIDAS APP</li>
			</ul>
			<ul>
				<li class="foot-procuct">网站政策</li>
				<li>使用条款</li>
				<li>隐私声明</li>
				<li>物流配送规则</li>
				<li>退换货规则</li>
				<li>adiCLUB会员规则</li>
				<li>下单指南</li>
				<li>印制服务条款</li>
			</ul>
		</ul>
		<div class="right">
			<p class="foot-procuct">关注我们</p>
			<span class="icon-span span1"></span>
			<span class="icon-span span2"></span>
		</div>
		<div class="right">
			<p class="foot-procuct">职业发展</p>
			<span class="icon-span span3"></span>
		</div>
	</div>
	<ul class="footer-method">
		<li>我们接受下列付款方式：</li>
		<li class="icon icon-zhi"></li>
		<li class="icon icon-wei"></li>
		<li class="icon icon-yin"></li>
	</ul>
	<div class="text">
		<p>企业团购热线及邮箱：&nbsp;&nbsp;&nbsp;团购热线：021-2525 6861</p>
		<p>团购邮箱：adidas.com  (仅限采购金额10万以上)</p>
	</div>
	<div class="footer-bot">
		<div class="footer-bot-con">
			<p class="p1">
				<span class="icon icon-china"></span>
				<span>中国</span>
				<span>隐私声明</span>
				<span>使用条款</span>
				<span>网站地图</span>
				<span>&copy;阿迪达斯体育(中国)有限公司保留所有权利</span>
			</p>
			<p class="p2">
				<span>苏ICP备14048805号-1</span><span class="icon icon-hui"></span><span>&copy;2019adidas江苏工商</span><span class="icon icon-hui"></span><span>苏公安网安备32059002001401号</span>
			</p>
		</div>
	</div>				
</body>
<script src="js/jquery.min.js"></script>
<script src="js/remove.js"></script>
<script>
	$.ajax({
		url:"http://10.35.164.241:8080/selectCar",
		success:function(data){
			let carList = JSON.parse(data);
			if(sessionStorage.getItem("showusername")){
				let username = sessionStorage.getItem("showusername");
				$.ajax({
					url:`http://10.35.164.241:8080/selectUserCar?username=${username}`,
					success:function(data){
						let userList = (JSON.parse(data));
						let result = 0;
						userList.forEach(function(item){
							let newItem = $("#template").clone(true);
							newItem.attr("id","");
							newItem.attr("data-id",item.id);
							newItem.find("img").attr("src",item.src);
							newItem.find(".car-title").html(item.title);
							newItem.find(".color").html(item.color);
							newItem.find(".size").html(item.size);
							newItem.attr("data-price",item.price);
							$(".product-price-money").html(userList.length+"件");
							newItem.find(".price-one").html(item.price+"x");
							newItem.appendTo($(".car-li"));
							result = result + parseInt(item.price.replace("￥",""));
							console.log(result);
						})
						$(".product-price-zong").html("￥"+result)
					}
				})
			}
		}
	})

	$(".del").click(function(){
		let id = $(this).closest("li").attr("data-id");
		let idThis = $(this);
		$.ajax({
			url:"http://10.35.164.241:8080/deleteItem",
			data:{
				id:id,
			},
			success:function(data){
				if(data === "success"){
					idThis.closest("li").remove();
					$.ajax({
						url:"http://10.35.164.241:8080/selectUserCar",
						data:{
							username:sessionStorage.getItem("showusername"),
						},
						success:function(data){
							$(".icon-car").html(JSON.parse(data).length);
							$(".product-price-money").html(JSON.parse(data).length+"件");
						}
					})
				}
			}
		})
	})

	$(".compute").click(function(){
		let carKu = [];
		let carKuzi = {};
		for(let i = 0; i < $(".car-li li").length; i++){
			carKuzi = {
				src:$(".car-li li").eq(i).find("img").attr("src"),
				title:$(".car-li li").eq(i).find(".car-title").html(),
				color:$(".car-li li").eq(i).find(".color").html(),
				size:$(".car-li li").eq(i).find(".size").html(),
				price:$(".car-li li").eq(i).attr("data-price"),
				listId:$(".car-li li").eq(i).attr("data-id"),
			}
			carKu.push(carKuzi);
		}
		localStorage.setItem("carmation",JSON.stringify(carKu));
		sessionStorage.setItem("state","true");
		location.href = "http://10.35.164.241:8080/submit.html"
	})
</script>
</html>